<template>
	<vue3-seamless-scroll  :list="list" :step="0.2" :hover="true">

		<el-row :gutter="1"  align="middle">
			<el-col v-for="item in list" :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb1">
				<el-card>
					<el-row :gutter="10">
						<el-col :span="6">
							<img width="80" height="102" :src="item.vimg" />
						</el-col>
						<el-col :span="18" >
							<div >
							<p>{{ item.visitor }}<el-tag :type="getType(item)">{{ item.typeName }}</el-tag>  <el-tag :type="getStatus(item)">{{ item.statusName }}</el-tag></p>
							<p>访客手机:{{ item.vphone }}</p>
							<p>访问时间:{{ item.visitTime }} ~ {{item.vendTime}}</p>
							</div>
						</el-col>
					
						<!-- <el-col :span="7" style="line-height: 19px;">
							 
							<p class="mt15" style="font-size:13px;text-align: center;font-weight: bolder;">
								{{item.visitor}}
							</p>
						
							<p class="mt15" style="font-size:11px;text-align: center;">區域：<span
									style="font-weight: bold;">{{item.Vphone}}</span></p>
						</el-col> -->
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</vue3-seamless-scroll>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router';
	import {
		Vue3SeamlessScroll
	} from 'vue3-seamless-scroll'
	import {
		http
	} from '@/api/http'
	import {
		httpErrorHandle
	} from '@/utils'
	import {
		ContentTypeEnum,
		RequestHttpEnum,
		ModuleTypeEnum
	} from '@/enums/httpEnum'
	export default {
		components: {
			Vue3SeamlessScroll,
		},
		setup() {
			const state = reactive({
				list: [],
			});
			let router = useRouter();
			// http://localhost:3000/#/stationWorkOrders?type=1
			let type = router.currentRoute.value.query.type;
			const init = (data) => {
				let url = null;
				if (type == undefined)
					url = `${ModuleTypeEnum.PROJECT}/LoadDoorRecords`
				else
					url = `${ModuleTypeEnum.PROJECT}/loadDoorRecords/${type}`
				http(RequestHttpEnum.GET)(url, data)
					.then(res => {
						state.list = res.data;
					});
			}
			onMounted(() => {
				init()

			})

			setInterval(() => {
				init();
			}, 30000);
			
			
			return {
				...toRefs(state),
			};
		},
		methods: {
			showColor(status) {
				if (status == null || status == undefined)
					return null;
				if (status == "正常生产中")
					return "#67fc40c7";
				if (status == "无订单生产")
					return "#EFFF0FFF";
				if (status == "未生产")
					return "#BCC4BCFF";
				if (status == "不在线")
					return "#f50000c7";

				return null;
			},
			getType(item){
				// switch(item.)
			},
			getStatus(item){
				
			},
			showIconShine(status) {
				if (status == null || status == undefined)
					return null;
				if (status == "无订单生产" || status == "未生产" || status == "不在线")
					return 'icon-shine';

				return null;
			}
		}
	};
</script>

<style scoped>
	/* 	@import url('../../../public/css/iconfont.css');
	@import url('../../../public/css/iconshine.css'); */

	.v-s-s {
		/* height: 200px; */
		margin: 20px auto;
		overflow: hidden;
		/* font-size: 13px; */

		.v-s-s_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 50px 0;
		}
	}

	.el-badge {
		--el-badge-bg-color: var(--el-color-danger);
		--el-badge-radius: 20px;
		--el-badge-font-size: 22px;
		--el-badge-padding: 6px;
		--el-badge-size: 28px;
		position: relative;
		vertical-align: middle;
		display: inline-block;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content
	}
</style>